import React,{ Suspense,lazy}from 'react';
const Recommend =lazy(()=> import("../view/recommend/recommend"))
const Singer =lazy(()=> import("../view/singer/singer"))
const Rank =lazy(()=> import("../view/rank/rank"))
const Datil =lazy(()=> import("../view/datil/datil"))

function withLoading(Component:any) {
  // const TestComp =lazy(Component);
  return (props:any)=>(
    <Suspense fallback={<div>Loading...</div>}>
      <Component {...props}/>
    </Suspense>
  )
}
export default [
  {
    path: '/recommend',
    name: 'recommend',
    component: withLoading(Recommend),
  }, {
    path: '/singer',
    name: 'singer',
    component: withLoading(Singer),
  }, {
    path: '/rank',
    name: 'rank',
    component: withLoading(Rank),
  },
  {
    path: '/datil/:id',
    name: 'Datil',
    component: withLoading(Datil),
  }
];
